<template>
	<div id="coming">
		<ul>
			<li v-for="item in MovieList2" :key="item.id">
				<div>
					<img :src="require('../assets/images/'+item.img+'.png')">
				</div>
				<div>
					<p>{{item.name}}</p>
					<p><span>{{item.mark}}人想看</span></p>
					<p class="actors">主演： {{item.perfor}}</p>
					<p>{{item.count}}</p>
				</div>
				<div>
					<button type="button">预售</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:"ComingTab",
		data(){
			return{
				MovieList2:[]
			}
		},
		mounted(){
			axios.get("/mock/api.json").then(
			response=>{
				console.log(response.data)
				this.MovieList2=response.data.movielist2
			}
			)
		}
	}
</script>

<style scoped>
	#coming ul{
		margin-bottom: 50px;
	}
	#coming ul li{
		height: 130px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom:solid #CCCCCC 1px;
	}
	div{
		height: 110px;
		color: #999999;
		font-size: 15px;
	}
	img{
		width: 80px;
	}
	li div:nth-child(1){
		width: 25%;
		padding-left: 10px;
	}
	li div:nth-child(2){
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	li div:nth-child(3){
		width: 22%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.actors{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	button{
		background-color: deepskyblue;
		color: white;
		width: 50px;
		height: 30px;
		border: skyblue 1px solid;
		border-radius: 5px;
	}
	li div:nth-child(2)>p:nth-child(1){
		font-weight: bold;
		font-size: 17px;
		color: black;
	}
</style>
